<i18n>
{
  "en": {
    "page_title": "User Management"
  },
  "zh": {
    "page_title": "用户管理"
  }
}
</i18n>

<template>
  <el-card>

    <section>
      <header class="section-header first">
        <div>外观图</div>
        <el-button type="info" circle icon="el-icon-edit-outline" @click="modify"></el-button>
      </header>
      <div class="pictures-list">
        <PictureBox v-for="(item, index) in pictures" :key="index" @replace="replace(pictureItem)"/>
        <PictureBoxEmpty v-for="(item, index) in pictures" :key="index" />
      </div>
    </section>

    <section>
      <header class="section-header">
        <div>安装示意图</div>
        <el-button type="info" circle icon="el-icon-edit-outline" @click="modify"></el-button>
      </header>
      <div class="pictures-list">
        <PictureBox v-for="(item, index) in pictures" :key="index" @replace="replace(pictureItem)"/>
        <PictureBoxEmpty v-for="(item, index) in pictures" :key="index" />
      </div>
    </section>

    <section>
      <header class="section-header">
        <div>尺寸图</div>
        <el-button type="info" circle icon="el-icon-edit-outline" @click="modify"></el-button>
      </header>
      <div class="pictures-list">
        <PictureBox v-for="(item, index) in pictures" :key="index" @replace="replace(pictureItem)"/>
        <PictureBoxEmpty v-for="(item, index) in pictures" :key="index" />
      </div>
    </section>

    <section>
      <header class="section-header">
        <div>其他</div>
        <el-button type="info" circle icon="el-icon-edit-outline" @click="modify"></el-button>
      </header>
      <div class="pictures-list">
        <PictureBox v-for="(item, index) in pictures" :key="index" @replace="replace(pictureItem)"/>
        <PictureBoxEmpty v-for="(item, index) in pictures" :key="index" />
      </div>
    </section>

    <!-- 替换图片 -->
    <el-dialog
      :title="replaceDialogTitle"
      :close-on-click-modal="false"
      :visible.sync="replaceVisible"
      width='40%'>
        <ReplacePicture />
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click.prevent="replaceVisible = false">{{$t('common.ok')}}</el-button>
        <el-button type='danger' @click="replaceVisible = false">{{$t('common.cancel')}}</el-button>
      </span>
    </el-dialog>

    <!-- 批量修改图片 -->
    <el-dialog
      :title="modifyDialogTitle"
      :close-on-click-modal="false"
      :visible.sync="modifyVisible"
      top="30px"
      width='60%'>
        <PictureBatchModify />
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click.prevent="modifyVisible = false">{{$t('common.ok')}}</el-button>
        <el-button type='danger' @click="modifyVisible = false">{{$t('common.cancel')}}</el-button>
      </span>
    </el-dialog>
  </el-card>
</template>

<script>
  import PictureBatchModify from '../pictureBatchModify'
  import ReplacePicture from '../replacePicture'
  import PictureBox from '../pictureBox'
  import PictureBoxEmpty from '../pictureBox/empty'
  export default {
    data () {
      return {
        replaceDialogTitle: '',
        replaceVisible: false,

        modifyDialogTitle: '',
        modifyVisible: false,

        pictures: Array(10),
        specificationData: [{
          label: '2016-05-02',
          value: '王小虎'
        }, {
          label: '2016-05-04',
          value: '王小虎1'
        }]
      }
    },
    components: {
      PictureBox,
      PictureBoxEmpty,
      ReplacePicture,
      PictureBatchModify
    },
    computed: {

    },
    watch: {

    },
    created () {

    },
    methods: {
      onSubmit() {
        console.log('submit!');
      },
      handleClick(tab, event) {
        console.log(tab, event);
      },
      handleDelete(index, row) {
        this.specificationData.splice(index, 1)
      },
      addSpecification() {
        this.specificationData.push({
          label: '',
          value: ''
        })
      },
      replace(pictureItem) {
        this.replaceDialogTitle = "TODO:pictureItem.name"
        this.replaceVisible = true
      },
      modify(pictureList) {
        this.modifyDialogTitle = "TODO:pictureList section.name"
        this.modifyVisible = true
      },
      todo() {

      }
    }
  }
</script>

<style scoped>
  .section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 15px 0 5px;
    color: #666;
    font-size: 16px;
    padding: 5px;
    border-bottom: 1px solid #dadada;
  }

  .section-header.first {
    margin-top: 0px;
  }

  .pictures-list {
    display: flex;
    justify-content: space-around;
    justify-content: space-evenly;
    flex-wrap: wrap;
  }



  /* .el-table >>> .el-table__row {
    background-color: transparent;
  } */



</style>
